<template>
  <div v-if="isDesktop" class="pc">
    <div class="pc-l">
      <img class="icon-fuchuang" src="@/assets/images/icon_fuchuang.png" alt="">
    </div>
    <div class="box">
      <div>
        <img class="logo" src="@/assets/images/fuchuang_logo.png" alt="logo" />
      </div>
      <div class="download-box">
        <div class="box-item">
          <img class="qr-code" src="@/assets/images/icon_windows_blue.png" alt="icon_windows_blue" />
          <a-button class="btn" type="primary" size="large" @click="onDownloadPC">
            <template #default>windows 下载</template>
            <template #icon>
              <img class="icon-windows" src="@/assets/images/icon_windows.png" alt="icon_windows">
            </template>
          </a-button>
        </div>
        <div class="box-item">
          <img class="qr-code" src="@/assets/images/androidDownloadFuchuang.png" alt="logo" />
          <div>Android 下载</div>
        </div>
        <!-- <div class="box-item">
          <img class="qr-code" src="@/assets/images/ios_qrCode_download.jpg" alt="logo" />
          <div>IOS 下载</div>
        </div> -->
      </div>
    </div>
  </div>
  <div v-else-if="isMobile" class="h5">
    <div>
      <img class="logo" src="/public/logo.png" alt="logo" />
    </div>
    <div>
      <img class="logo2" src="@/assets/images/fuchuang_logo.png" alt="logo" />
    </div>
    <a-button class="btn" type="primary" @click="onDownload">
      <template #default>Android 下载</template>
      <template #icon>
        <img class="icon" src="@/assets/images/icon_android.png" alt="icon_android">
      </template>
    </a-button>
    <!-- <a-button class="btn" type="primary">
      <template #default>IOS 下载</template>
      <template #icon>
        <img class="icon" src="@/assets/images/icon_ios.png" alt="icon_ios">
      </template>
    </a-button> -->
    <!-- <div>
      <img class="banner2" src="@/assets/images/icon_fuchuang.png" alt="fuchuang_banner2" />
    </div> -->
  </div>
</template>

<script setup lang="ts">
import { useDevice } from '@/hooks'
import { downloadByUrl } from '@/utils/downloadFile'

defineOptions({ name: 'Download' })

const { isMobile, isDesktop } = useDevice()

const onDownload = () => {
  downloadByUrl({ url: 'https://download.fortunesemic.com/dir/apk/fuchuangMeeting.apk', fileName: 'fuchuangMeeting.apk' })
}

const onDownloadPC = () => {
  window.location.href = 'https://fcyhy.obs.cn-east-3.myhuaweicloud.com/dir/exe/setup.exe'
}
</script>

<style lang="scss" scoped>
.pc {
  height: 100vh;
  background-color: #D4E2FE;
  display: flex;
  .pc-l {
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .icon-fuchuang {
    width: 80%;
  }
  .box {
    width: 50%;
  }
  .download-box {
    display: flex;
    .box-item {
      color: #ffffff;
      font-size: 20px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      .icon-windows {
        width: 20px;
      }
      ::v-deep .arco-btn-icon {
        display: flex;
      }
    }
  }
  .logo {
    margin-top: 20%;
    margin-bottom: 60px;
    width: 400px;
  }
  .qr-code {
    width: 200px;
    height: 200px;
    margin-right: 15px;
    margin-bottom: 20px;
  }
}
.h5 {
  background: linear-gradient(60deg, rgb(22,93,255), rgb(148,191,255));
  height: 100vh;
  text-align: center;
  .logo {
    margin: 50px 0 20px 0;
    width: 150px;
  }
  .logo2 {
    width: 80%;
    margin-bottom: 40px;
  }
  .btn {
    width: 280px;
    height: 55px;
    font-size: 20px;
    margin-bottom: 40px;
  }
  ::v-deep .arco-btn-icon {
    height: 22px;
    display: flex;
  }
  .banner2 {
    width: 80%;
    position: fixed;
    bottom: 0;
    left: 10%;
  }
}
</style>
